<template>
  <div class="register">
    <div class="login-con">
      <el-form
        ref="formInline"
        :model="formInline"
        :rules="ruleInline"
        label-width="100px"
        @submit.native.prevent
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="user">
          <el-input type="text" v-model="formInline.username" placeholder="Username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="formInline.password" placeholder="Password"></el-input>
        </el-form-item>
        <el-form-item label="真实名字" prop="realName">
          <el-input type="text" v-model="formInline.realname" placeholder="realName"></el-input>
        </el-form-item>
        <el-form-item label="邮箱验证码" prop="emailCode">
          <el-input type="text" v-model="formInline.emailCode" placeholder="code"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input type="text" v-model="formInline.email" placeholder="Email"></el-input>

          <br>
          <input type="submit" value="发送" @click="checkEmailCode()" style="float: left;" />
        </el-form-item>

      </el-form>
      <el-button type="primary" @click="register" alig>注册</el-button>
    </div>
  </div>
</template>
<script>
import { resolve } from "q";
export default {
  data() {
    return {
      formInline: {
        username: "",
        password: "",
        email: "",
        realname: "",
        emailCode: ""
      },

      checkcode: "",
      ruleInline: {
        user: [
          {
            message: "Please fill in the user name",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "Please fill in the password.",
            trigger: "blur"
          },
          {
            type: "string",
            min: 6,
            message: "The password length cannot be less than 6 bits",
            trigger: "blur"
          }
        ],
        email: [
          {
            required: true,
            message: "Please fill in the email",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    checkEmailCode: function() {
      var data = this.formInline.email;
      var url = "/ssms/getEmailCode";

      this.$axios
        .get(
          url,
          { params: { toEmail: data } },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(response.data);
          if (response.data.code === 0) {
            alert(response.data.obj);
            alert("添加成功！");
          } else {
            alert(response.data.obj);
          }
        })
        .catch(error => {
          alert(error);
        });
    },
    register: function() {
      var data = JSON.stringify(this.formInline);
      var url = "/ssms/addUser";

      this.$axios({
        method: "POST",
        url: "/ssms/addUser?emailCode=" + this.formInline.emailCode,
        headers: {
          "Content-Type": "application/json"
        },
        data: data,
        // emailCode:this.formInline.emailCode
        responseType: "application/json"
      })
        .then(response => {
          console.log(response.data);
          if (response.data.code === 0) {
            alert("添加成功！");
            this.$route.push("/userView/rooms")
          } else {
            alert(response.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });

      //   console.log(data);
      //   this.$axios
      //     .get(url, {params:{user:data,emailCode:this.code}}, {
      //       headers: {
      //         "Content-Type": "application/json"
      //       }
      //     })
      //     .then(response => {
      //       if (response.data.code === 0) {
      //         alert("添加成功！");

      //       }
      //     })
      //     .catch(error => {
      //       alert(error);
      //     });
    }
  }
};
</script>

<style>
</style>
